<template>
  <div class="second-cateory">
    <div class="header">
      <TitleName name="二级分类" />
      <el-form :model="formData" size="large">
        <el-form-item label="分类名称:">
          <el-col :span="5">
            <el-input
              v-model="formData.anme"
              placeholder="请输入分类名称"
            ></el-input>
          </el-col>
          <el-col :span="10">
            <el-button class="search" @click="search">查询</el-button>
            <el-button class="plus" type="primary" :icon="Plus" @click="plus"
              >新增</el-button
            >
          </el-col>
        </el-form-item>
      </el-form>
      <!-- <div class="btn-wrap">
        <button class="plus" @click="plusUser">新增用户</button>
        <button class="update" @click="updateUser">修改用户</button>
        <button class="del" @click="delUser">删除用户</button>
      </div> -->
    </div>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        max-height="531"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column align="center" property="name" label="一级分类名称" />
        <el-table-column align="center" property="name" label="二级分类名称" />
        <el-table-column align="center" property="name" label="备注" />
        <el-table-column align="center" property="name" label="操作">
          <template v-slot="{ row }">
            <div>
              <button class="update" @click="updateCateory">修改</button>
              <button class="del" @click="delCateory">删除</button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 15px">
        <Pagination
          @getDataList="getDataList"
          :pageSize="pageSize"
          :total="total"
          :currentPage="currentPage"
        />
      </div>
    </div>
    <!-- 新增 -->
    <Dialog
      class="dialog"
      top="22vh"
      width="27%"
      :title="title"
      v-model:visible="showDia"
    >
      <template #content>
        <el-form
          :model="diaFormData"
          label-width="auto"
          size="large"
          label-position="right"
        >
          <el-form-item label="一级分类：">
            <el-col :span="20">
              <el-input v-model="diaFormData.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="二级分类：">
            <el-col :span="20">
              <el-input v-model="diaFormData.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="备注：">
            <el-col :span="20">
              <el-input
                :rows="6"
                type="textarea"
                v-model="diaFormData.name"
              ></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="btn-wrap">
          <button class="cancel" @click="diaCancel">取消</button>
          <button class="sure" @click="diaSure">确定</button>
        </div>
      </template>
    </Dialog>
    <DelDialog v-model:delDiaFlag="delDiaFlag" @delDiaSure="delDiaSure" />
  </div>
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import TitleName from "../../components/TitleName.vue";
import { ref, reactive } from "vue";
import DelDialog from "./component/Deldia";
let formData = reactive({});
let diaFormData = reactive({});
let pageSize = ref("");
let total = ref(111);
let delDiaFlag = ref(false); //删除弹框显示
let title = ref("新增");
let currentPage = ref("");
let showDia = ref(false);
//删除弹框确认按钮
const delDiaSure = () => {
  console.log("我被执行了");
};
let tableData = reactive([
  { name: "一班" },
  {},
  {},
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
  { name: "一班" },
]);
const search = () => {};
const plus = () => {
  title.value = "新增";
  showDia.value = true;
};
const diaCancel = () => {
  showDia.value = false;
};
const updateCateory = () => {
  title.value = "修改";
  showDia.value = true;
};
const delCateory = () => {
  delDiaFlag.value = true;
  console.log("删除");
};
const handleSelectionChange = () => {};
const getDataList = () => {};
</script>
<style scoped lang="scss">
.second-cateory {
  height: 100%;
  padding: 15px 17px 17px 12px;
  .dialog {
    .el-form {
      margin-left: 31px;
      margin-top: 32px;
    }
    .btn-wrap {
      display: flex;
      justify-content: center;
      margin-top: 103px;
      margin-bottom: 70px;
      button {
        width: 109px;
        height: 51px;
        background: #d73d32;
        border-radius: 5px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
      }
      .cancel {
        background: #d73d32;
      }
      .sure {
        margin-left: 25px;
        background: #0250f9;
      }
    }
  }
  .table-wrap {
    margin-top: 15px;
    width: calc(100vw - 175px);
    height: calc(100vh - 17px - 227px - 60px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px 16px 0 18px;
    button {
      width: 72px;
      height: 31px;
      border-radius: 5px;
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
    }
    .update {
      background: #1cbe06;
    }
    .del {
      background: #d73d32;
      margin-left: 16px;
    }
  }
  .header {
    height: 142px;
    background: #ffffff;
    padding-top: 26px;
    width: calc(100vw - 175px);
    .plus {
      width: 120px;
    }
    button {
      width: 100px;
      margin-left: 21px;
      height: 42px;
      background: #0250f9;
      border-radius: 5px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
      line-height: 42px;
    }
    .el-form {
      padding-left: 25px;
      margin-top: 28px;
    }
  }
}
</style>
